﻿<div class="layui-card" id="lg-JobList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>职位列表</div>
    <div class="layui-card-body" id="">
        <!--查询条件-->
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item">
               <lg-form-singletext :data="{Title:'职位名称'}" v-model:value="where.Title" val-type="value"></lg-form-singletext>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="OnSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnAddJob"><i class="fa fa-plus fa-fw"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="GetJobs"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check">
                                序号
                            </th>
                            <th>职位名称</th>
                            <th>对应表单</th>
                            <th>申请人数</th>
                            <th>开始时间</th>
                            <th>截止时间</th>
                            <th>权重</th>
                            <th style="width:100px;text-align:center">开放</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in Jobs">
                            <td class="lg-table-check">
                                {{index+1}}
                            </td>
                            <td>{{row.Title}}</td>
                            <td>{{row.FormTitle}}</td>
                            <td>{{row.Register}}</td>
                            <td>{{row.StartTime}}</td>
                            <td>{{row.EndTime}}</td>
                            <td>{{row.SortNumber}}</td>
                            <td style="text-align:center">
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsUsing==1}]" v-on:click="OnSwitch(row,'IsUsing')">
                                    <em>{{row.IsUsing==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="OnEdit(row)" title="编辑"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" v-on:click="OnDelete(row)" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="Jobs.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-JobList" style="margin-top:-10px;"></div>
        </div>
    </div>
</div>

<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js';
    frame.createPage({
        mounted: function () {
            var page = this;
            var app= Vue.createApp({
                data() {
                    return {
                        Jobs: [],
                        pageId: page.id,
                        options: { 
                            Semester: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "1",
                                    Value: 1
                                },
                                {
                                    Text: "2",
                                    Value: 2
                                }],
                        },
                        loading: false,
                        where:{
                            Page:1,
                            Limit:10,
                            Year:"",
                            Semester:"",
                            Grades:""
                        },
                        checked: [],
                        importJobId:0,
                        model:null,
                        panel:[false]
                    }
                },
                mounted: function () {
                    this.GetJobs();
                },
                methods: {
                    GetJobs:function(){
                        this.loading = true;
                        this.Jobs = [];
                        lg.request({
                            url: "/api/sys/recruit/GetJobList",
                            method: "post",
                            data: this.where,
                            success: res => {
                                if (res.code == 0) {
                                    this.Jobs = res.data||[];
                                    this.setPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    setPage:async function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-JobList'
                            , curr: that.where.Page
                            , limit: that.where.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.where.Page = obj.curr;
                                    that.where.Limit = obj.limit;
                                    that.GetJobs();
                                }
                            }
                        });
                    },
                    OnSwitch:function(item,key){
                        var data={Id:item.Id};
                        data[key] = item[key] == 1 ? 0 : 1;
                        lg.request({
                            url: "/api/sys/recruit/EditJob",
                            data: data,
                            method:"post",
                            success:res=>{
                                if(res.code==0){
                                    item[key] = data[key];
                                }else{
                                    layer.msg(res.msg,{icon:2})
                                }
                            }
                        }) 
                    },
                    OnAddJob:function(){
                        frame.NavigateTo({
                            url: "/lgm/recruit/Job/add",
                            title: "发布职位"
                        })
                    },
                    Refresh:function(){
                        this.GetJobs();
                    },
                    OnSearch:function(){
                        this.where.Page=1;
                        this.GetJobs();
                    },
                    OnEdit:function(item){
                        frame.NavigateTo({
                            url: "/lgm/recruit/Job/edit/" + item.Id,
                            title: "编辑职位"
                        })
                    },
                    OnDelete:function(item){
                        let this_this=this
                        layer.confirm('真的删除行么', function (index) {
                            layer.close(index);
                            lg.request({
                                url: "/api/sys/recruit/deleteJob",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        this_this.GetJobs()
                                    }
                                }
                            })  
                        });
                    }
                }
            })
            freeForm.regComponent(app);
            page.vm=app.mount("#lg-JobList")
        },
        methods:{
            reload:function(){
                this.vm.GetJobs();
            }
        }
    }).mount();
</script>